<template>
  <div class="movie-list-page">
    <div class="movie-selector">
      <div class="condition-list">
        <div
          :class="{ all: true, active: !order }"
          @click="changeCondition('order', null)"
        >
          综合排序
        </div>
        <ul>
          <li
            v-for="(item, index) in orderList"
            :key="index"
            :class="{ active: order === item }"
            @click="changeCondition('order', item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="condition-list">
        <div
          :class="{ all: true, active: !type }"
          @click="changeCondition('type', null)"
        >
          全部类型
        </div>
        <ul>
          <li
            v-for="(item, index) in typeList"
            :key="index"
            :class="{ active: type === item }"
            @click="changeCondition('type', item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="condition-list">
        <div
          :class="{ all: true, active: !country }"
          @click="changeCondition('country', null)"
        >
          全部地区
        </div>
        <ul>
          <li
            v-for="(item, index) in countryList"
            :key="index"
            :class="{ active: country === item }"
            @click="changeCondition('country', item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="condition-list">
        <div
          :class="{ all: true, active: !year }"
          @click="changeCondition('year', null)"
        >
          全部年份
        </div>
        <ul>
          <li
            v-for="(item, index) in yearList"
            :key="index"
            :class="{ active: year === item }"
            @click="changeCondition('year', item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <ul class="movie-list">
      <li v-for="item in list" :key="item.key">
        <img :src="item.horizontalImg" alt="" />
        <span>{{ item.score / 10 }}</span>
      </li>
    </ul>
    <div class="pager" v-if="showNextBtn">
      <div class="next-page" @click="nextPage">下一页</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'movie-list',
  data: () => {
    return {
      typeList: [
        '动作',
        '战争',
        '科幻',
        '冒险',
        '犯罪',
        '灾难',
        '魔幻',
        '悬疑',
        '剧情',
        '恐怖',
        '西部',
        '喜剧',
        '动画',
        '纪录片'
      ],
      orderList: ['最新上线', '热播流行', '大猩猩评分'],
      countryList: [
        '美国',
        '中国',
        '韩国',
        '日本',
        '英国',
        '中国香港',
        '法国',
        '俄罗斯',
        '德国',
        '印度'
      ],
      yearList: [
        '2021',
        '2020',
        '2019',
        '2018',
        '2017',
        '2016-2012',
        '2011-2007',
        '2006-2000',
        '90年代',
        '80年代'
      ],
      params: {},
      current: 1,
      pageSize: 50,
      total: 0,
      list: [],
      order: null,
      type: null,
      year: null,
      country: null,
      showNextBtn: false
    }
  },
  methods: {
    async getList (current = 1) {
      const res = await this.$store.dispatch('movie/GET_MOVIE_LIST', {
        ...this.params,
        pageNum: current,
        pageSize: this.pageSize
      })
      if (res.code === 100) {
        this.list = this.list.concat(res.result.list.map(v => ({
          ...v, horizontalImg: `${v.horizontalImg}?x-oss-process=image/interlace,1/resize,m_fill,w_350,h_197/quality,q_100/sharpen,100/format,jpg`
        })))
        this.current = res.result.pageNum
        this.total = res.result.totalPages
        this.showNextBtn = res.result.pageNum < res.result.totalPages
      }
    },
    changeCondition (type, item) {
      this[type] = item
      if (!item) {
        if (type === 'year') {
          delete this.params.yearBegin
          delete this.params.yearEnd
        } else {
          delete this.params[type]
        }
      } else {
        if (type === 'year') {
          if (item.indexOf('-') >= 0) {
            const arr = item.split('-')
            this.params.yearBegin = arr[0]
            this.params.yearEnd = arr[1]
          } else if (item === '80年代') {
            this.params.yearBegin = '1980'
            this.params.yearEnd = '1989'
          } else if (item === '90年代') {
            this.params.yearBegin = '1990'
            this.params.yearEnd = '1999'
          } else {
            this.params.yearBegin = item
            this.params.yearEnd = item
          }
        } else {
          this.params[type] = item
        }
      }
      this.list = []
      this.getList()
    },
    nextPage () {
      this.getList(this.current + 1)
    }
  },
  mounted () {},
  created () {
    this.getList()
  }
}
</script>
<style scoped>
.movie-list-page {
  position: relative;
  font-size: 14px;
}
.condition-list {
  display: table;
  margin-bottom: 10px;
}
.condition-list .all {
  display: table-cell;
  vertical-align: top;
}
.condition-list ul {
  display: table-cell;
  vertical-align: top;
}
.condition-list ul > li {
  display: inline-block;
}
.condition-list .all,
.condition-list ul > li {
  color: #9f9f9f;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 28px;
  padding: 0 12px;
}
.condition-list .active {
  color: #f42c2c;
  border-radius: 3px;
  background: #222;
}
.movie-list {
  margin-top: 30px;
}
.movie-list > li {
  position: relative;
}
.movie-list > li span {
  font-size: 14px;
  color: #ff5500;
  font-weight: bold;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.movie-list > li:nth-child(5n + 1) {
  padding-left: 0;
}
.movie-list > li {
  display: inline-block;
  width: 197px;
  padding-left: 10px;
  margin: 10px 0 15px 0;
}
.movie-list > li > img {
  width: 197px;
  font-size: 0;
}
.pager {
  text-align: center;
}
.next-page {
  color: #f42c2c;
  background: #222;
  display: inline-block;
  padding: 10px 30px;
  cursor: pointer;
  border-radius: 6px;
  margin-top: 10px;
}
</style>
